<template>
<el-container class="container">
  <el-header class="header">
    <el-col :span='6' class="logo">大数据管理平台</el-col>
    <el-col :span='8'>
      <el-autocomplete
        placeholder="搜索" size="small"
        v-model="searchState"
        value-key="name"
        @select="eventSearchSelect"
        suffix-icon="el-icon-search"
        :fetch-suggestions="querySearchAsync">
      </el-autocomplete>
      
    </el-col>
    <el-col :span='10'>
    <el-menu class="nav-menu"
      mode='horizontal'
      background-color='#082a49'
      text-color='aliceblue'
      active-text-color='#fff'
      :default-active="$route.path"
      :router="true"
      style="border-bottom:none !important;"
    >
    <el-menu-item
      v-for="item in homeRoutes.children" 
      :key="item.path"
      :index="item.path"
    >{{item.name}}</el-menu-item>
    </el-menu>
  </el-col>
  </el-header>
  <el-main class="main">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    
  </el-main>
</el-container>
</template>

<script>
export default {
  name: 'home',
  data(){
    return{
      enterpriseBaseInfo:[],
      searchState:''
    }
  },
  beforeCreate(){
    if(this.$route.path==='/'){
      this.$router.push({path:'/data-map'})
    }
  },
  created(){
    this.initData()
  },
  methods:{
    initData(){
      this.$axios.get('/enterprise/enterpriseBaseInfo').then(response=>{
        let body=response.data
        this.$store.commit('loadInfo',body)
      })
    },
    querySearchAsync(queryString,cb){
      let enterpriseBaseInfo=Object.values(this.$store.state.enterpriseBaseInfo)
      let result=queryString?enterpriseBaseInfo.filter(this.createStateFilter(queryString)):enterpriseBaseInfo
      cb(result)
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.name.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
      };
    },
    eventSearchSelect(item){
      console.log(this.name)
      this.$root.eventHub.$emit('queryEnterpirse',item._id)
    }
  },
  computed:{
    homeRoutes(){
      return this.$router.options.routes[0]
    }
  }
}
</script>

<style lang="less" scoped>
.container{
  height: 100%;
  .header{
    background: #082a49;
    height: 60px;
    line-height: 60px;
    color: aliceblue;
    .el-autocomplete{
      min-width: 80%;
      max-width: 95%;
    }
    .el-input--small{
      .el-button--small{
        border: none;
      }
    }
  }
  .logo{
    font-size: 1.5rem;
  }
  .main{
    padding: 0px;
  }
}
</style>
